<template>
  <div class="select-address">
    <v-distpicker
      :province="province"
      :city="city"
      :area="area"
      @selected="addressChecked"
    ></v-distpicker>
  </div>
</template>

<script>
import { isNull } from '@/utils/tool.js'
export default {
  prop: {
    initAddress: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      province: '',
      city: '',
      area: '',
      address: '',
    }
  },
  created() {
    if (isNull(this.initAddress)) {
      this.province = this.initAddress.province
      this.city = this.initAddress.city
      this.area = this.initAddress.area
    } else {
      this.resetAddress()
    }
  },
  methods: {
    // 选择省市县
    addressChecked(data) {
      this.province = data.province.value
      this.city = data.city.value
      this.area = data.area.value
      this.address = this.province + this.city + this.area
      this.$emit('update:address', this.address)
    },
    resetAddress() {
      this.province = ''
      this.city = ''
      this.area = ''
    },
  },
}
</script>

<style lang="less" scoped>
.select-address {
  width: 100%;
}
//修改地区选择框样式
/deep/.distpicker-address-wrapper {
  display: flex;
  label {
    flex: 1;
    margin: 0 0.3125rem;
    &:first-child {
      margin-left: 0;
    }
    &:last-child {
      margin-right: 0;
    }
  }
  select {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    outline: 0;
    padding: 0 15px;
    width: 100% !important;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  option {
    padding: 10px 0;
    margin: 0;
    text-align: center;
    color: #999;
    font-size: 14px;
  }
}
</style>
